<template>
  <div class="">
    <public-table :table-option="tableOption" :table-data="tableData" :height="550" :page="pageParam"
      @page-change="onPageChange">
      <el-form @submit.native.prevent>
        <el-row>
          <el-col :span="6" class="p-r10">
            <el-form-item label="申请时间">
              <el-date-picker v-model="searchParam.applyTime" type="daterange" range-separator="-"
                start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="p-r10">
            <el-form-item label="审批状态">
              <el-select v-model="searchParam.approvalStatus" placeholder="请选择审批状态" clearable style="width: 100%;">
                <el-option v-for="item in approveOptions" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="p-r10">
            <el-form-item label="推送状态">
              <el-select v-model="searchParam.pushStatus" placeholder="请选择推送状态" clearable style="width: 100%;">
                <el-option v-for="item in pushOptions" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="p-r10">
            <el-form-item label="开票状态">
              <el-select v-model="searchParam.billingStatus" placeholder="请选择开票状态" clearable style="width: 100%;">
                <el-option v-for="item in invoiceOptions" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="p-r10">
            <el-form-item label="发票号码">
              <el-input v-model="searchParam.receiptNumber" placeholder="请输入发票号码" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="18" style="display: flex;align-items: center;" class="p-r10">
            <el-form-item>
              <div class="d-flex">
                <el-button class="button_view" @click="searchHandler">查询</el-button>
                <el-button color="#f0f0f0" style="color: #000000" @click="resetHandler">重置</el-button>
              </div>
              <el-divider direction="vertical" />
              <div class="d-flex">
                <el-button class="button_edit" @click="exportHandler">
                  <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>导出
                </el-button>
                <el-button class="button_edit" @click="applyHandler">
                  <svg-icon icon-class="add-icon-1" style="margin-right:5px;" />申请开票
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #operate="{ row }">
        <el-button size="small" class="button_view" @click="viewHandler(row)">开票信息</el-button>
      </template>
    </public-table>
    <addDialog ref="addDialogRef" @success="getList" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElDatePicker, ElSelect, ElOption, ElNotification, ElRow, ElCol, ElDivider, ElMessageBox } from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import AddDialog from "./newComponents/addDialog.vue";
import { invoiceApi } from "@/api/assets.js";
import { exportFile } from "@/common/utils/GlobalUtils.js";

import { useRoute } from "vue-router";
const route = useRoute();

let tableOption = ref([
  {
    prop: "businessName",
    label: "业务名称",
    minWidth: 100,
  },
  {
    prop: "projectName",
    label: "项目名称",
    minWidth: 100,
  },
  {
    prop: "contractName",
    label: "合同名称",
    minWidth: 100,
  },
  {
    prop: "contractNumber",
    label: "合同编号",
    minWidth: 100,
  },
  {
    prop: "resourceName",
    label: "资源名称",
    minWidth: 100,
  },
  {
    prop: "resourceLocation",
    label: "资源位置",
    minWidth: 100,
  },
  {
    prop: "lessee",
    label: "承租方",
    minWidth: 100,
  },
  {
    prop: "leaseArea",
    label: "租赁面积",
    minWidth: 100,
  },
  {
    prop: "invoicedAmount",
    label: "开票金额",
    minWidth: 100,
  },
  {
    prop: "internalRemarks",
    label: "内部备注",
    minWidth: 100,
  },
  {
    prop: "operate",
    label: "操作",
    width: 200,
    slot: true,
    slotName: "operate",
    fixed: "right",
    overHidden: false
  },
]);
let tableData = ref([]);

let pageParam = reactive({
  total: 0,
  current: 1,
  size: 20
});
let onPageChange = (e) => {
  pageParam.current = e.page;
  pageParam.size = e.limit;
  getList();
};

let searchParam = reactive({
  applyTime: "",
  approvalStatus: "",
  pushStatus: "",
  billingStatus: "",
  receiptNumber: "",
});

// 1-待审核 2-通过 3-驳回
let approveOptions = ref([
  {
    label: "待审核",
    value: 1,
  },
  {
    label: "通过",
    value: 2,
  },
  {
    label: "驳回",
    value: 3,
  },
]);

// 0-待推送 1-已推送 -1-失败
let pushOptions = ref([
  {
    label: "待推送",
    value: 0,
  },
  {
    label: "已推送",
    value: 1,
  },
  {
    label: "失败",
    value: -1,
  }
]);

// 0-待开票 1-已开票 -1-已作废 -2-已红冲
let invoiceOptions = ref([
  {
    label: "待开票",
    value: 0,
  },
  {
    label: "已开票",
    value: 1,
  },
  {
    label: "已作废",
    value: -1,
  },
  {
    label: "已红冲",
    value: -2,
  },
]);

let addDialogRef = ref(null);

// 搜索
let searchHandler = () => {
  getList();
};
// 重置
let resetHandler = () => {
  for (let key in searchParam) {
    searchParam[key] = "";
  }
  getList();
};

// 导出
let exportHandler = async () => {
  let time = searchParam.applyTime;
  let res = await invoiceApi.exportTableFile({
    businessId: route.params.contractId,
    startCreateTime: time ? time[0] : "",
    endCreateTime: time ? time[1] : "",
    approvalStatus: searchParam.approvalStatus,
    pushStatus: searchParam.pushStatus,
    billingStatus: searchParam.billingStatus,
    receiptNumber: searchParam.receiptNumber,
  });
  if (res) {
    exportFile(res, "租赁开票列表");
  }
};

// 申请开票
let applyHandler = () => {
  addDialogRef.value.openHandler("申请开票");
};

// 查看
let viewHandler = (row) => {
  addDialogRef.value.openHandler("开票信息", row);
};

let getList = async () => {
  let time = searchParam.applyTime;
  let res = await invoiceApi.getPageList({
    pageNum: pageParam.current,
    pageSize: pageParam.size,
    param: {
      businessId: route.params.contractId,
      startCreateTime: time ? time[0] : "",
      endCreateTime: time ? time[1] : "",
      approvalStatus: searchParam.approvalStatus,
      pushStatus: searchParam.pushStatus,
      billingStatus: searchParam.billingStatus,
      receiptNumber: searchParam.receiptNumber,
    }
  });
  if (res.data) {
    tableData.value = res.data.content;
    pageParam.total = res.data.totalSize;
  }
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
:deep(.el-date-editor) {
  height: 100%;
}

.p-r10 {
  padding-right: 10px;
}
</style>
